import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Form, Input, Button, message } from 'antd';

const ChangePassword: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = (values: any) => {
    setLoading(true);
    // u8fd9u91ccu5e94u8be5u8c03u7528APIu4feeu6539u5bc6u7801
    setTimeout(() => {
      message.success('u5bc6u7801u4feeu6539u6210u529f');
      form.resetFields();
      setLoading(false);
    }, 1000);
  };

  return (
    <PageContainer>
      <Card title="u4feeu6539u5bc6u7801" bordered={false}>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          style={{ maxWidth: 500, margin: '0 auto' }}
        >
          <Form.Item
            name="oldPassword"
            label="u5f53u524du5bc6u7801"
            rules={[{ required: true, message: 'u8bf7u8f93u5165u5f53u524du5bc6u7801' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="newPassword"
            label="u65b0u5bc6u7801"
            rules={[
              { required: true, message: 'u8bf7u8f93u5165u65b0u5bc6u7801' },
              { min: 8, message: 'u5bc6u7801u957fu5ea6u4e0du80fdu5c0fu4e8e8u4f4d' },
              {
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/,
                message: 'u5bc6u7801u5fc5u987bu5305u542bu5927u5c0fu5199u5b57u6bcdu3001u6570u5b57u548cu7279u6b8au5b57u7b26',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            label="u786eu8ba4u65b0u5bc6u7801"
            dependencies={['newPassword']}
            rules={[
              { required: true, message: 'u8bf7u786eu8ba4u65b0u5bc6u7801' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('u4e24u6b21u8f93u5165u7684u5bc6u7801u4e0du4e00u81f4'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              u63d0u4ea4
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  );
};

export default ChangePassword;
